<template>
  <div class="home-main wrapper">

  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.main-flex-layout {
  display: flex;
  gap: 36px;
  margin: 16px auto;
  align-items: flex-start;
  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
    margin: 16px auto;
  }
}

.main-left {
  .app-card{
    width: 338px;height: 549px;
  }
  .app-card-1{
    width: 338px;height: 549px;
  }
  flex: 1;
  .main-left-2{
    margin-top: 44px;
  }
  @media screen and (max-width: 768px) {
    width: 100%;
    p{
      font-size: 14px;
    }
  }
}

.main-right {
  flex: 2.4;
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media screen and (max-width: 768px) {
    width: 100%;
    gap: 16px;
  }
}

.main-news {
  .app-card {
    width: 1046px;height: 549px;
  }
  margin-bottom: 24px;
  @media screen and (max-width: 768px) {
    margin-bottom: 16px;
  }
}

.main-bottom-row {
  display: flex;
  gap: 36px;
  .app-card{
    width: 515px;height: 549px;
  }
  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
  }
}

.main-bottom-row > * {
  flex: 1;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
}
</style>